<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="${ctx}/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/weui.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/jquery-weui.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/icard.css?v=${cssVersion}">
    <link rel="stylesheet" href="${ctx}/static/font-awesome-4.7.0/css/font-awesome.css">
    <title>访客预约记录</title>

    <style>
        .weui-media-box:before{
            display: none;
        }


        .inner-block-cell:before {
            content: " ";
            position: absolute;
            left: 0;
            top: auto;
            right: 0;
            height: 1px;
            border-top: 1px solid #dadada;
            color: #dadada;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            left: 15px;
            z-index: 0;
            margin-top: 8px;
        }

        .list-item-block{
            display: block;
            background-color: #ffffff;
            -webkit-tap-highlight-color:rgba(220,220,220,0.5);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }
    </style>
</head>
<body style="background-color: #f2f2f2">
    <div class = "block-title" style="display: table; width: 100%;  text-align: left;height: 40px;z-index: 2;position: relative;">
        <div  style="color:#999999;font-size: 16px;display: table-cell; vertical-align: middle;padding-left: 15px;">
            访客预约列表
        </div>

        <div style="display: table-cell; text-align: right; padding-right: 16px; vertical-align: middle;">
            <a href="${ctx}/reservation/add" class="weui-btn weui-btn_mini weui-btn_primary btn-color-light-blue" style="display:inline-block;vertical-align: middle;padding-left: 10px;padding-right: 10px;text-align: center"><i class="fa fa-plus"></i>新增</a>
        </div>
    </div>

    <div class="container" id="container" style="height:100%; margin-top: -40px;overflow:auto;  z-index: 1;background-color: #f2f2f2; padding-right: 0px;padding-left: 0px; ">
        <!--下拉刷新-->
        <div class="weui-pull-to-refresh__layer" style=" ">
            <div class='weui-pull-to-refresh__arrow'></div>
            <div class='weui-pull-to-refresh__preloader'></div>
            <div class="down">下拉刷新</div>
            <div class="up">释放刷新</div>
            <div class="refresh">正在刷新</div>
        </div>
        <div class="contentList" id="contentList" style="margin-left: 15px;margin-right: 15px;margin-top: 20px;">
            <!--内容展示区域-->
        </div>
        <div class="weui-loadmore">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>


    <script src="${ctx}/static/jqweui/js/jquery-2.1.4.js"></script>
    <script src="${ctx}/static/jqweui/js/jquery-weui.js?v=1.2"></script>
    <script src="${ctx}/static/handlerbars.min.js"></script>
    <script src="${ctx}/static/bootstrap/js/bootstrap.js"></script>
    <script src="${ctx}/static/bootstrap/js/bootstrap-suggest.min.js"></script>
    <script src="${ctx}/static/jquery.qrcode.min.js"></script>
    <script id="reservation-template" type="text/x-handlebars-template">
        <a href="${ctx}/reservation/detail?id={{id}}" class="list-item-block">
            <div class="weui-media-box weui-media-box_text" style="background-color: transparent;box-shadow: 3px 3px 3px #dadada;border-top: 1px #dadada;margin-bottom: 10px;">
                <div style="display: table; width: 100%;  text-align: left;">
                    <h4 class="weui-media-box__title" style="display: table-cell;font-weight: 400;font-size: 17px;color: #2e6da4">{{reservationNo}}</h4>
                </div>
                <div style="display: table; width: 100%;  text-align: left;" class="inner-block-cell">
                    <div style="margin-top: 20px;height: 20px;" >
                        <p class="weui-media-box__desc" style="display:inline-block;width: 60px;">接待人:</p>
                        <p class="weui-media-box__desc" style="display:inline-block;">{{employeenameReception}}({{employeenoReception}})</p>
                    </div>
                    <div style="margin-top: 5px;height: 20px;">
                        <p class="weui-media-box__desc" style="display:inline-block;width: 60px;">来访日期:</p>
                        <p class="weui-media-box__desc" style="display:inline-block;">{{forecastVisitingTime}}</p>
                    </div>
                    <div style="margin-top: 5px;height: 20px;">
                        <p class="weui-media-box__desc" style="display:inline-block;width: 60px;">访客:</p>
                        <p class="weui-media-box__desc" style="display:inline-block;">{{visitorNames}}</p>
                    </div>
                </div>
            </div>
        </a>

    </script>
<script type="text/javascript">

    /*window.addEventListener('pageshow', function (event) {
        if (event.persisted || window.performance && window.performance.navigation.type == 2)
        {
            location.reload();
        }
    },false);*/

    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

    $(function(){
        $("#container").css("padding-bottom","50px");
    });

    function getReservationDetail() {
        alert("aaa");
    }
    var theTemplateScript = $("#reservation-template").html();
    // 编译模板
    var theTemplate = Handlebars.compile(theTemplateScript);

    var page = 1;
    var limit = 10;
    var loading = false; //状态标记
    loadComplaints(limit,page);
    //=========================下拉刷新
    $("#container").pullToRefresh(function() {
        page = 1;
        $("#contentList").html("");
        loadComplaints(10,1);
        $("#container").pullToRefreshDone(); // 重置下拉刷新
    });

    $("#container").infinite().on("infinite", function () {
        if (loading) return;
        loading = true;
        page++; //页数
        $('.weui-loadmore').show();
        loadComplaints(limit,page);
    });

    function appendTemplateData(dataList) {

        for(var i=0;i<dataList.length;i++){
            var dataObj = dataList[i];
            var context={
                "id":dataObj.id,
                "reservationNo": dataObj.reservationno,
                "employeenameReception": dataObj.employeenameReception,
                "employeenoReception": dataObj.employeenoReception,
                "forecastVisitingTime": new Date(dataObj.forecastVisitingTime).Format("yyyy-MM-dd"),
                "visitorNames": dataObj.visitorNames,
            };
            var theCompiledHtml = theTemplate(context);

            $("#contentList").append(theCompiledHtml);
        }
    };

    function loadComplaints(limit,page) {
        $.showLoading("正在加载");
        $.ajax({
            type: "GET",
            url: "${ctx}/reservation/getPageData?pageNo="+page+"&pageSize="+limit,//换上自己的api
            data: "",
            isAsync: true,
            success: function(res) {
                $.hideLoading();
                loading = false;
                if(res.status ==200) {
                    if(res.data.records.length > 0 && res.data.records != null) {
                        //creatTemplate(res.data);//这里是将数据遍历并创建dom添加到容器中
                        appendTemplateData(res.data.records);
                    }else {
                        if(page == 1) {
                            console.log("没有数据");
                            $(".container").hide();
                            $("#noContent").show();
                        }else {
                            var endHtml = '<div class="weui-cells__title textCenter" >没有更多内容了哟~~</div>';
                            $("#contentList").append(endHtml);
                            loading = true;
                        }
                    }
                }else{
                    $.toptip(res.msg, 'error');
                    var endHtml = '<div class="weui-cells__title textCenter" >没有更多内容了哟~~</div>';
                    $("#contentList").append(endHtml);
                    loading = true;
                }
                $(".weui-loadmore").hide();
            },
            error: function(err) {
                $.toptip("发生未知错误", 'error');
                $.hideLoading();
                loading = false;
            }
        });
    }

</script>
</body>
</html>